﻿<Page x:Class="NewMarkersSample.Pages.StockMarkersPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	  xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    Title="Stock markers" Loaded="Page_Loaded">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition/>
			<RowDefinition/>
		</Grid.RowDefinitions>
		
		<d3:ChartPlotter Name="plotter">
			<d3:ChartPlotter.MainHorizontalAxis>
				<d3:HorizontalDateTimeAxis Name="dateAxis"/>
			</d3:ChartPlotter.MainHorizontalAxis>
			
			<d3:MarkerChart Name="chart1" IndependentValuePath="Time" ItemsSource="{Binding}">
				<d3:TemplateMarkerGenerator>
					<d3:TemplateMarkerGenerator.Resources>
						<d3:StockHeightConverter x:Key="heightConverter"/>
					</d3:TemplateMarkerGenerator.Resources>
					
					<DataTemplate>
						<d3:StockItem Style="{x:Static d3:StockItemStyles.Default}" ToolTipService.ShowDuration="10000"
									  d3:ViewportPanel.ViewportWidth="0.3"
									  d3:ViewportPanel.MinScreenWidth="10"
									  Open="{Binding Open}"
									  Close="{Binding Close}"
									  Low="{Binding Low}"
									  High="{Binding High}"
									  d3:ViewportPanel.Y="{Binding Low}"
									  d3:ViewportPanel.ViewportVerticalAlignment="Bottom"
									  d3:ViewportPanel.X="{Binding Time}">
							
							<d3:ViewportPanel.ViewportHeight>
								<MultiBinding Converter="{StaticResource heightConverter}">
									<Binding Path="High"/>
									<Binding Path="Low"/>
								</MultiBinding>
							</d3:ViewportPanel.ViewportHeight>
							
							<d3:StockItem.ToolTip>
								<TextBlock>
										<TextBlock Text="High="/><TextBlock Text="{Binding High}"/>
										<LineBreak/>
										<TextBlock Text="Close="/><TextBlock Text="{Binding Close}"/>
										<LineBreak/>
										<TextBlock Text="Open="/><TextBlock Text="{Binding Open}"/>
										<LineBreak/>
										<TextBlock Text="Low="/><TextBlock Text="{Binding Low}"/>
								</TextBlock>
							</d3:StockItem.ToolTip>
						</d3:StockItem>
					</DataTemplate>
				</d3:TemplateMarkerGenerator>
			</d3:MarkerChart>

			<RepeatButton Name="addStockInfo" Content="Add Stock info" Click="addStockInfo_Click" Canvas.Bottom="10" Canvas.Right="10"/>
		</d3:ChartPlotter>

		<d3:ChartPlotter Name="plotter2" Grid.Row="1">
			<d3:ChartPlotter.MainHorizontalAxis>
				<d3:HorizontalDateTimeAxis Name="dateAxis2"/>
			</d3:ChartPlotter.MainHorizontalAxis>

			<d3:MarkerChart Name="chart2" IndependentValuePath="Time" ItemsSource="{Binding}">
				<d3:TemplateMarkerGenerator>
					<d3:TemplateMarkerGenerator.Resources>
						<d3:StockHeightConverter x:Key="heightConverter"/>
					</d3:TemplateMarkerGenerator.Resources>

					<DataTemplate>
						<d3:StockItem Style="{x:Static d3:StockItemStyles.CandleStick}"
									  d3:ViewportPanel.ViewportWidth="0.3"
									  d3:ViewportPanel.MinScreenWidth="10"
									  Open="{Binding Open}"
									  Close="{Binding Close}"
									  Low="{Binding Low}"
									  High="{Binding High}"
									  d3:ViewportPanel.Y="{Binding Low}"
									  d3:ViewportPanel.ViewportVerticalAlignment="Bottom"
									  d3:ViewportPanel.X="{Binding Time}">

							<d3:ViewportPanel.ViewportHeight>
								<MultiBinding Converter="{StaticResource heightConverter}">
									<Binding Path="High"/>
									<Binding Path="Low"/>
								</MultiBinding>
							</d3:ViewportPanel.ViewportHeight>
						</d3:StockItem>
					</DataTemplate>
				</d3:TemplateMarkerGenerator>
			</d3:MarkerChart>
		</d3:ChartPlotter>
	</Grid>
</Page>
